<template>
<el-card class="manage">
    <div class="tabs">
      <slot name="tabs"></slot>
    </div>
    <div class="search">
      <div class="search-condition">
        <div class="title">
          <slot name="title"></slot>
        </div>
        <div class="date">
          <slot name="date"></slot>
        </div>
        <div class="select">
          <slot name="select"></slot>
        </div>
        <div class="search-btns">
          <slot name="btns"></slot>
        </div>
      </div>
      <div class="search-opration">
        <slot name="opration"></slot>
      </div>
    </div>
    <div class="table">
      <slot name="table"></slot>
    </div>
    <div class="page">
      <slot name="page"></slot>
    </div>
</el-card>
</template>


<style lang="scss" scoped>
@import '@style/extend';
.manage {
  width: 100%;
  height: 100%;
  // overflow: auto;
  // background: $a3-Color;
  box-sizing: border-box;
  .search {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    .search-condition {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20px;
      .title {
        @extend .standard-4;
        // padding-right: 10px;
        min-width: 80px;
      }
      .date {
        box-sizing: border-box;
        display: flex;
        align-items: center;
      }
      .select {
        padding-left: 10px;
        padding-right: 10px;
        display: flex;
        align-items: center;
        // display: block;
      }

      .search-btns {
        display: flex;
      }
    }

    .search-opration {
      flex: 1;
      text-align: right;
      padding-right: 20px;
    }
  }
  .table {
    height: calc(100% - 120px);
    padding: 0 20px;
    // overflow: auto;
  }
  .page {
    height: 40px;
    line-height: 40px;
    background: white;
    margin: 10px 20px 5px;
    text-align: right;
  }
}
</style>

